<template>
  <div>
    <span>获取验证码({{ time }})</span>
  </div>
</template>

<script lang="ts" setup>

import { ref, watch } from 'vue'

let time = ref<number>(5);

let props = defineProps(['flag'])
let $emit = defineEmits(['getFlag']);
//监听父组件传递过来props数据变化
watch(
  () => props.flag,
  () => {                      
    //开启定时器
    let timer = setInterval(() => {
      time.value--;
      if (time.value == 0) {
        //通知父组件倒计时模式结束
        $emit('getFlag', false);
        //清除定时器
        clearInterval(timer);
      }
    }, 1000);
  },
  {
    immediate: true,
  }
);


</script>


<style scoped></style>